<template>
  <div style="height: 48px">
    <div class="flex_js p_0_20 border_bottom" style="height: 48px">
      <div class="flex fs_16 fw" v-if="!top_menu">
        <svgBtn
          icon="show_menu"
          style="font-size: 20px; margin-right: 20px"
          :class="menu_show ? 'to_left' : 'to_right'"
          @click="store.commit('change_isCollapse')"
        ></svgBtn>
        <div class="flex" v-if="show_crumbs">
          <el-dropdown v-for="(item, index) in menu_list" :key="index">
            <span
              class="el-dropdown-link"
              style="color: #333 !important; font-size: 16px !important"
              v-if="index == select_index"
            >
              {{ item.name }}
              <img
                src="@/assets/img/arrowDown.png"
                style="width: 10px; height: 10px; margin-left: 4px"
              />
              <span
                style="margin: 0 8px; height: 13px; border-left: 1px solid #999"
              ></span>
            </span>
            <template #dropdown>
              <el-dropdown-menu style="padding: 0">
                <el-dropdown-item
                  style="padding: 10px"
                  @click="select_menu({ item: item1 })"
                  v-for="(item1, index1) in item.children"
                  :key="index1"
                >
                  {{ item1.name }}</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <div style="color: #3580eb">{{ last_value }}</div>
        </div>
      </div>
      <div v-else style="flex: 1; height: 100%" class="flex">
        <div class="flex" style="width: 180px">
          <!-- <img src="@/assets/img/icon_house.png" style="width: 24px; height: 28px" /> -->
          <img
            src="@/assets/img/logo.png"
            style="width: 80px; height: 16px; margin-left: 4px"
          />
        </div>
        <el-menu
          :default-active="activeIndex"
          class="cp"
          style="height: 42px; border-radius: 2px"
          background-color="#fff"
          text-color="#333"
          active-text-color="#3580eb"
          mode="horizontal"
          unique-opened
          @select="select_top_menu"
        >
          <el-sub-menu
            v-for="(item, index) in menu_list_1"
            :key="index + ''"
            :index="index + 1"
          >
            <template #title style="height: 100%">
              <div class="flex_start">
                <svgBtn
                  :icon="item.icon"
                  style="
                    font-size: 18px;
                    margin-right: 8px;
                    height: 42px;
                    line-height: 42px;
                  "
                ></svgBtn>
                <span style="height: 42px; line-height: 42px">{{ item.name }}</span>
              </div>
            </template>

            <div v-for="(item1, index1) in item.children" :key="item1.path + ''">
              <el-sub-menu
                v-if="
                  (item1.path == null || item1.path == '') && item1.parentId == item.id
                "
                :index="index1 + ''"
              >
                <template #title>{{ item1.name }}</template>
                <div v-for="item2 in item1.children" :key="item2.path + ''">
                  <el-menu-item
                    v-if="item2.parentId == item1.id"
                    :index="item2.path"
                    style="padding-left: 45px"
                    >{{ item2.name }}
                  </el-menu-item>
                </div>
              </el-sub-menu>
              <el-menu-item
                v-if="item1.path != null && item1.parentId == item.id && item1.path != ''"
                :index="item1.path"
                class="menu_item"
                style="padding-left: 30px"
                >{{ item1.name }}
              </el-menu-item>
            </div>
          </el-sub-menu>
        </el-menu>
      </div>
      <div class="flex" style="flex-shrink: 0">
        <div>当前企业：</div>
        <el-select
          filterable
          v-show="show_input"
          @change="search_select"
          v-model="select_value"
        >
          <el-option
            v-for="item in select_options_list"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          >
          </el-option>
        </el-select>
        <el-tooltip content="企业选择" placement="bottom">
          <svgBtn
            class="top_svg_btn"
            :style="{
              backgroundColor: svg_color_list[0] == '#3580eb' ? '#ECF4FF' : '',
            }"
            :color="svg_color_list[0]"
            @mouseenter="svg_color_list[0] = '#3580eb'"
            @mouseleave="svg_color_list[0] = '#45474A'"
            icon="search"
            @click="show_input = !show_input"
          ></svgBtn>
        </el-tooltip>
        <el-tooltip :content="isScreenfull ? '取消全屏' : '全屏'" placement="bottom">
          <svgBtn
            class="top_svg_btn"
            :style="{
              backgroundColor: svg_color_list[1] == '#3580eb' ? '#ECF4FF' : '',
            }"
            :color="svg_color_list[1]"
            @mouseenter="svg_color_list[1] = '#3580eb'"
            @mouseleave="svg_color_list[1] = '#45474A'"
            :icon="isScreenfull ? 'page_mini_1' : 'page_large_1'"
            @click="full"
          ></svgBtn>
        </el-tooltip>
        <el-tooltip content="工程配置" placement="bottom">
          <svgBtn
            class="top_svg_btn"
            :style="{
              backgroundColor: svg_color_list[2] == '#3580eb' ? '#ECF4FF' : '',
            }"
            :color="svg_color_list[2]"
            @mouseenter="svg_color_list[2] = '#3580eb'"
            @mouseleave="svg_color_list[2] = '#45474A'"
            icon="setup"
            @click="show_setup_box = true"
          ></svgBtn>
        </el-tooltip>
        <div class="">
          <el-dropdown>
            <div class="flex m_left10">
              <img
                v-if="user_info?.avatarUrl != ''"
                :src="user_info?.avatarUrl"
                class="user_header"
                alt=""
              />
              <img v-else src="@/assets/img/headerImg.png" class="user_header" alt="" />
              <span>{{ user_info?.name }}</span>
              <svgBtn icon="xiala" style="font-size: 12px; margin-left: 8px"></svgBtn>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item style="padding: 10px" @click="lock_box = true">
                  <div class="flex">
                    <svgBtn
                      icon="lock"
                      style="font-size: 14px; margin-right: 6px"
                    ></svgBtn>
                    锁定屏幕
                  </div>
                </el-dropdown-item>
                <el-dropdown-item style="padding: 10px" @click="sign_out">
                  <div class="flex">
                    <svgBtn
                      icon="exit"
                      style="font-size: 14px; margin-right: 6px"
                    ></svgBtn>
                    退出系统
                  </div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
    <el-drawer
      v-model="show_setup_box"
      direction="rtl"
      size="30%"
      :close-on-click-modal="false"
    >
      <template #title>
        <h4>项目配置</h4>
      </template>
      <template #default>
        <set_up></set_up>
      </template>
    </el-drawer>
    <el-drawer
      v-model="lock_box"
      direction="rtl"
      size="30%"
      :close-on-click-modal="false"
    >
      <template #title>
        <h4>锁定屏幕</h4>
      </template>
      <template #default>
        <div class="tc m_bottom20">
          <img
            v-if="user_info.avatarUrl != ''"
            :src="user_info.avatarUrl"
            style="width: 96px; height: 96px; border-radius: 50%"
            alt=""
          />
          <img
            v-else
            src="@/assets/img/headerImg.png"
            style="width: 96px; height: 96px; border-radius: 50%"
            alt=""
          />
          <div class="m_top10">{{ user_info.name }}</div>
        </div>
        <div>锁屏密码</div>
        <el-input
          class="m_10_0"
          placeholder="请输入"
          v-model="lock_keyword"
          show-word-limit
          maxlength="30"
        ></el-input>
        <div class="tr">
          <el-button @click="lock_box = false">取消</el-button>
          <el-button type="primary" @click="lock">锁定</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import set_up from "@/view/components/setup.vue";
import svgBtn from "@/components/svg_button.vue";
import { ref, onMounted, onUnmounted, computed } from "vue";
import EventBus from "@/utils/EventBus";
import screenfull from "screenfull"; // 全屏插件
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { getCookie, setCookie } from "@/utils/cookie";
const user_info = computed(() => {
  return getCookie("user_info") ? (JSON.parse(getCookie("user_info")) as any) : {};
});
// const is_production = ref(process.env.NODE_ENV == 'development')
const svg_color_list = ref(["#45474A", "#45474A", "#45474A"]);
const isScreenfull = ref(false);
const router = useRouter();
const store = useStore();
const show_setup_box = ref(false);
const menu_list = computed(() => {
  return store.state.role_list ? store.state.role_list : [];
});
const show_input = ref(true); // 搜索框 显影
const select_list = ref([]);
const last_value = ref("运行环境配置"); // 显示最后菜单名称
const has_tabs = ref(false);
const lock_box = ref(false); // 锁屏框
const lock_keyword = ref(""); // 锁屏密码
// 锁定屏幕
const lock = () => {
  if (lock_keyword.value == "") {
    ElMessage.error("请输入锁屏密码！");
    return;
  }
  setCookie("lock_keyword", lock_keyword.value, 1);
  EventBus.emit("lock", lock_keyword.value);
  lock_box.value = false;
  lock_keyword.value = "";
};
// 退出
const sign_out = () => {
  ElMessageBox.confirm("确定退出系统？", "", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    closeOnClickModal: false,
    type: "warning",
  })
    .then(() => {
      window.close();
    })
    .catch();
};

// 选择企业
const search_select = (e) => {
  //   console.log(e)
  get_current_page({ index: "/function" });
  router.replace({ name: "function" });
  select_options_list.value.some((item) => {
    if (item.id == e) {
      let has_copy_mould = item.enterpriseLevelList.some((item1) => {
        return item1.productId == 2 && (item1.levelId == 3 || item1.levelId == 4);
      });
      store.commit("set_has_copy_mould", has_copy_mould);
      store.commit("set_current_enterprise_level", item.enterpriseLevelList);
    }
    return item.id == e;
  });

  //   cascader.value.popperVisible = false //监听值发生变化就关闭它
  store.commit("set_enterprise_id", e);
  setCookie("enterprise_id", e, 7, "/");
  store.commit("set_organizationIdList", e);
  EventBus.emit("change_enterprise_id", e);
  EventBus.emit("close_tab", 5);
};

const select_index = ref(0);
const activeIndex = ref();
const show_crumbs = ref(true);

const top_menu = computed(() => {
  return store.state.is_top_menu;
});
const menu_list_1 = computed(() => {
  return store.state.role_list;
});
const menu_show = computed(() => {
  return store.state.isCollapse;
}); // 菜单收 展
const select_value = computed(() => {
  return store.state.enterprise_id;
}); // 企业 组织选择
const select_options_list = computed(() => {
  return store.state.enterprise_list;
}); //搜索选项
const tabs_list = computed(() => {
  return store.state.tabs_list;
});

onMounted(() => {
  get_current_page({ index: "" });
  EventBus.on("search_menu", (e) => {
    show_input.value = e as any;
  });
  EventBus.on("show_crumbs", (e) => {
    show_crumbs.value = e as any;
  });
  EventBus.on("change_default_active", (e) => {
    console.log(e);
    activeIndex.value = e;
  });
  EventBus.on("menu_value", (e) => {
    console.log(e);
    has_tabs.value = false;
    get_current_page(e);
  });
  EventBus.on("remove_tabs", (e: any) => {
    if (select_list.value.length == 1) return;
    select_list.value.splice(e.index, e.length);
  });
});
const get_current_page = (e) => {
  var current_path = e.index;
  let list = store.state.tabs_list;
  if (current_path == "" && list.length) {
    list.forEach((element) => {
      if (element.is_active) {
        current_path = element.path;
        activeIndex.value = element.path;
      }
    });
  }
  menu_list.value.forEach((item, index) => {
    if (item.children && item.children.length) {
      item.children.some((item1) => {
        if (item1.path == current_path) {
          last_value.value = item1.name;
          select_index.value = index;
          EventBus.emit("change_default_active", current_path);
        }
        if (item1.children && item1.children.length) {
          item1.children.some((item2) => {
            if (item2.path == current_path) {
              last_value.value = item2.name;
              select_index.value = index;
              EventBus.emit("change_default_active", current_path);
            }
          });
        }
      });
    }
  });
};
const to_path = ref();
const has_tab_top = (path) => {
  var a = false;
  for (let i in tabs_list.value) {
    if (path == tabs_list.value[i].path) {
      store.commit("select_tabs_list", i);
      a = true;
    }
  }
  return a;
};
const select_top_menu = (index, indexPath) => {
  to_path.value = index;
  if (has_tab_top(index)) {
    router.replace({
      name: to_path.value.substr(1, to_path.value.length - 1),
    });
  } else {
    router.push(to_path.value.substr(1, to_path.value.length - 1));
  }
  if (index == "/index") {
    EventBus.emit("menu_value", { index: "0", type: 1 });
  } else {
    EventBus.emit("menu_value", { index: indexPath.toString(), type: 1 });
  }
};
onUnmounted(() => {
  EventBus.off("menu_value");
  EventBus.off("search_menu");
  EventBus.off("show_crumbs");
});
const full = () => {
  // 判断是否支持
  if (!screenfull.isEnabled) {
    ElMessage({
      message: "不支持全屏",
      type: "warning",
    });
    return false;
  }
  screenfull.toggle();
  isScreenfull.value = !isScreenfull.value;
};

const has_tab = ref(false);
const select_menu = (e) => {
  //   console.log(e)
  var path = e.item.path;
  for (let i in tabs_list.value) {
    if (path == tabs_list.value[i].path) {
      router.replace({
        name: path.substr(1, path.length - 1),
      });
      store.commit("select_tabs_list", i);
      has_tab.value = true;
    }
  }
  if (!has_tab.value) {
    router.push(path.substr(1, path.length - 1));
  }
  has_tab.value = false;
  get_current_page({ index: path });
  last_value.value = e.item.name;
};
</script>

<style lang="scss" scoped>
:deep(.el-menu) {
  border-bottom: none;
  --el-menu-text-color: #333;
  --el-menu-hover-text-color: #3580eb !important;
  --el-menu-bg-color: #fff;
  --el-menu-hover-bg-color: #f5f9ff !important;
  --el-menu-active-color: #3580eb;
}
.menu_item:hover {
  color: #3580eb !important;
  background-color: #f5f9ff !important;
}
:deep(.el-menu--horizontal > .el-sub-menu .el-sub-menu__title) {
  :hover {
    color: #3580eb !important;
  }
}
:deep(.el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title) {
  background-color: #3580eb !important;
  color: #fff !important;
  :hover {
    color: #fff !important;
  }
}
.user_header {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 5px;
}
.top_svg_btn {
  font-size: 20px !important;
  padding: 5px;
  margin: 0 5px;
  border-radius: 3px;
  height: 20px;
  line-height: 20px;
}

:deep(.el-dropdown-menu__item) {
  height: 16px;
  line-height: 16px;
}
.to_left {
  transform: rotateZ(180deg);
}
.to_right {
  transform: rotateZ(360deg);
}
</style>
